<template>
<div>
  <!-- top 搜索和 添加学生信息 -->
  <el-row :gutter="20" style="margin-bottom: 20px">
    <el-col :span="8" :data="tableData">
      <el-input placeholder="输入姓名搜索" v-model="name" clearable @keyup.enter.native="enter">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
    </el-col>
    <el-col :span="4" :inline="true"><el-button type="primary" @click="dialogVisible = true">添加学生信息</el-button></el-col>
  </el-row> 
<!-- content 主体 -->
  <el-table :data="tableData" style="width: 100% border-radius: 50px;" max-height="400" >
    <el-table-column prop="id" label="ID" width="40"></el-table-column>
    <el-table-column prop="IDNumber" label="身份证号" width="165"></el-table-column>
    <el-table-column prop="name" label="姓名" ></el-table-column>
    <el-table-column prop="StudentNumber" label="学号"></el-table-column>
    <el-table-column prop="school" label="所属学校" ></el-table-column>
    <el-table-column prop="add_time" label="添加时间"></el-table-column>
    <el-table-column prop="login_assword" label="登录密码" ></el-table-column>
    <el-table-column prop="admission_time" label="入学时间" ></el-table-column>
    <el-table-column prop="gender" label="性别" width="50"></el-table-column>
    <el-table-column fixed="right" label="删除信息" >
    <template slot-scope="scope">
    <el-tooltip class="item" effect="dark" content="删除信息" placement="top" :enterable="false">
      <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button> 
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="更改信息" placement="top" :enterable="false" >
       <el-button type="text" size="small" @click="dialogVisi(scope.row.id)">更改</el-button> 
    </el-tooltip>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加对话框 -->
    <el-dialog title="添加学生信息" :visible.sync="dialogVisible" width="600px" @close="clcer">
      <el-form :model="addForm" :rules="addFomRules" ref="addFomRef" label-width="100px" class="demo-addForm">
        <el-form-item label="身份证号" prop="IDNumber">
          <el-input v-model="addForm.IDNumber"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="StudentNumber">
          <el-input v-model="addForm.StudentNumber"></el-input>
        </el-form-item>
        <el-form-item label="所属学校" prop="school">
          <el-input v-model="addForm.school"></el-input>
        </el-form-item>
        <el-form-item label="添加时间" prop="add_time">
          <el-input v-model="addForm.add_time"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="login_assword">
          <el-input v-model="addForm.login_assword"></el-input>
        </el-form-item>
        <el-form-item label="入学时间" prop="admission_time">
          <el-input v-model="addForm.admission_time"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-input v-model="addForm.gender"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('addForm')">点击添加</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  <!-- 修改对话框 -->
  <el-dialog title="修改学生信息" :visible.sync="eddialog" width="600px" @close="clcer">
      <el-form :model="reviseForm" :rules="reviseForm" ref="reviseForm" label-width="100px" class="demo-reviseForm">
        <el-form-item label="身份证号" prop="IDNumber">
          <el-input v-model="reviseForm.IDNumber"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="reviseForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="StudentNumber">
          <el-input v-model="reviseForm.StudentNumber"></el-input>
        </el-form-item>
        <el-form-item label="所属学校" prop="school">
          <el-input v-model="reviseForm.school"></el-input>
        </el-form-item>
        <el-form-item label="添加时间" prop="add_time">
          <el-input v-model="reviseForm.add_time"></el-input>
        </el-form-item>
        <el-form-item label="入学时间" prop="admission_time">
          <el-input v-model="reviseForm.admission_time"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="change()">保存</el-button>
          <el-button @click="eddialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>


<script>
import axios from 'axios'
  export default {
    data() {
      return {
        name: '',
        // 验证表单规则
        addFomRules: {},
        dialogVisible: false,
        eddialog: false,
        // 添加调单数据
        addForm:{ IDNumber: '', name: '', StudentNumber: '', school: '', add_time: '', login_assword: '', admission_time: '', gender: '' },
        // 修改调单数据
        reviseForm: { IDNumber: '', name: '', StudentNumber: '', school: '', add_time: '', admission_time: '', id: '' },
        tableData: []
      }
    },
    methods: {
      // 点击搜索
      search(){
        var names = this.name
        axios.post('http://localhost:8000/student/search',{
            name: names
        }).then((res) => {
          console.log(res.data)
          this.tableData = res.data
        })
      },
      // 回车搜索  
      enter(){
        var names = this.name
        axios.post('http://localhost:8000/student/search',{
            name: names
        }).then((res) => {
          console.log(res.data)
          this.tableData = res.data
        })
      },
      // 添加信息
      submitForm(){
         const that = this.addForm
         console.log(that)
         axios.post('http://localhost:8000/student/add',{ 
           IDNumber: that.IDNumber, 
           name: that.name, 
           StudentNumber: that.StudentNumber, 
           school: that.school, 
           add_time: that.add_time, 
           login_assword: that.login_assword, 
           admission_time: that.admission_time, 
           gender: that.gender 
           }).then((res) => { })
           this.$router.go(0);
      },

      // 清空，重置
      clcer(){
        // this.$refs.addFomRef.resetFields()
      },

      // 修改获取 id
      dialogVisi(id){
        var ID = id
        this.reviseForm.id = ID
        this.eddialog = true
      },
      // 删除信息
      deleteRow($index, tableData) {
        this.$confirm('是否永久删除该学生信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功! 请刷新页面'
          });
          if(this.$message){
              axios.post('http://localhost:8000/student/del',{
                id: tableData[$index].id
              }).then((res) => {
                console.log(res);
                }).catch((error) => {
                    console.log(error);
                    });
                    this.$router.go(0);
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 修改信息
        change() {
        var that_ = this.reviseForm
        axios.post('http://localhost:8000/student/modify', {
           IDNumber: that_.IDNumber,
           name: that_.name,
           StudentNumber: that_.StudentNumber,
           school: that_.school,
           add_time: that_.add_time,
           admission_time: that_.admission_time,
           id: that_.id
        }).then((res) => {
            console.log(res)
        }).catch((error) => {
            console.log(error)
        })
          this.$router.go(0);
      }
    },

    created(){
        axios.get('http://localhost:8000/student/manage')
            .then((res) => {
                this.tableData = res.data
            })
    }
  }
 

   
</script>

